<template>
	<view class="edit-order">
		<!-- 页面标题 -->
		<view class="page-header">
			<text>编辑工单</text>
		</view>

		<!-- 表单卡片 -->
		<view class="form-card">
			<form @submit.prevent="submitEdit">
				<view class="form-group">
					<text class="form-label">问题描述</text>
					<textarea v-model="orderDetail.description" placeholder="请输入问题描述" class="input-area" />
				</view>

				<view class="form-group">
					<text class="form-label">紧急程度</text>
					<picker mode="selector" :range="urgencyOptions" @change="onUrgencyChange">
						<view class="picker">
							{{ selectedUrgencyText || '请选择紧急程度' }}
						</view>
					</picker>
				</view>

				<view class="form-group">
					<text class="form-label">故障位置</text>
					<input v-model="orderDetail.place" placeholder="请输入位置" class="input-field" />

				</view>

				<button @click="submitEdit()" type="submit" class="primary-btn">提交修改</button>
			</form>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				orderDetail: {
					description: '',
					urgency: '',
					place: ''
				},
				urgencyOptions: ['低', '中', '高'],
				selectedUrgencyText: ''
			};
		},
		onLoad(options) {
			if (options.orderId) {
				this.fetchOrderDetail(options.orderId);
			}
		},
		methods: {
			async fetchOrderDetail(orderId) {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: `http://localhost:8082/api/common/orderDetail/${orderId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'GET'
					});

					if (res.statusCode === 200) {
						this.orderDetail = res.data.data;
						this.selectedUrgencyText = this.urgencyOptions[this.orderDetail.urgency - 1];
					} else {
						uni.showToast({
							title: '获取工单详情失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			onUrgencyChange(e) {
				const index = e.detail.value;
				this.selectedUrgencyText = this.urgencyOptions[index];
				this.orderDetail.urgency = index + 1;
			},
			async submitEdit() {
				try {
					const token = uni.getStorageSync('token');
					const orderId = this.$route.query.orderId;
					const res = await uni.request({
						url: 'http://localhost:8082/api/applicant/resubmit',
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'POST',
						data: {
							orderId: orderId,
							urgency: this.orderDetail.urgency,
							description: this.orderDetail.description,
							place: this.orderDetail.place
						}
					});

					if (res.statusCode === 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						uni.navigateTo({
							url: `/pages/user/orderDetail/orderDetail?orderId=${orderId}`
						});
					} else {
						uni.showToast({
							title: '修改失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.edit-order {
		padding: 20px;
		background: #f0f4f8;
		min-height: 100vh;
	}

	/* 顶部标题栏 */
	.page-header {
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		padding: 14px;
		text-align: center;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	/* 表单卡片 */
	.form-card {
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		padding: 20px;
		border-radius: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* 表单项 */
	.form-group {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}

	/* 带竖线的label */
	.form-label {
		font-weight: 500;
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}

	/* 输入框与选择器 */
	.input-field {
		padding: 12px 14px;
		border: 1px solid #d0d7de;
		border-radius: 10px;
		background: #fff;
		font-size: 14px;
		color: #333;
	}

	.picker,
	.input-area {
		padding: 12px 14px;
		border: 1px solid #d0d7de;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(6px);
		font-size: 14px;
		color: #333;
		transition: all 0.2s ease;
		box-sizing: border-box;
	}

	.input-area {
		min-height: 100px;
	}

	.input-field:focus,
	.input-area:focus {
		border-color: #1976d2;
		box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
	}

	/* 提交按钮 */
	.primary-btn {
		width: 100%;
		padding: 14px;
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		font-weight: bold;
		font-size: 16px;
		border: none;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
		transition: all 0.3s ease;
	}

	.primary-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
	}
</style>